<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人信息</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet"
	href="../plugins/font-awesome/css/font-awesome.min.css">
<style type="text/css">
.img {
	width: 90px;
	height: 90px;
}
</style>
</head>

<body>
	<div style="margin: 15px;">
		<blockquote class="layui-elem-quote">
			<a href="javascript:;" class="layui-btn layui-btn-small" id="pass">
				<i class="layui-icon">&#xe642;</i> 密码修改
			</a>
		</blockquote>
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 20px;">
			<legend>基础信息修改</legend>
		</fieldset>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<div id="layer-photos-demo" class="beg-pull-right">
					<img src="../images/ali.gif" id="image" class="img">
				</div>
			</div>
			<div class="site-demo-upload layui-form-item">
				<label class="layui-form-label">头像修改</label>
				<div class="layui-input-inline">
					<input type="file" name="file" class="layui-upload-file" id="test">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名修改</label>
				<div class="layui-input-inline">
					<input type="text" name="username" lay-verify="username" id="name"
						autocomplete="off" placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">部门</label>
				<div class="layui-input-inline">
					<select name="department" id="department">
						<option value="">请选择部门</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="" id="query1">修改</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改密码模板 -->
	<script type="text/template" id="update-password">
		<fieldset class="layui-elem-field layui-field-title"
			style="margin-top: 20px;">
			<legend>密码修改</legend>
		</fieldset>
		<div class="layui-form-item">
			<label class="layui-form-label">原密码</label>
			<div class="layui-input-inline">
				<input type="password" name="password" lay-verify="password"
					autocomplete="off" placeholder="请输入原密码" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">新密码</label>
			<div class="layui-input-inline">
				<input type="password" name="newpassword" lay-verify="newpassword"
					autocomplete="off" placeholder="请输入新密码" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">确认密码</label>
			<div class="layui-input-inline">
				<input type="password" name="renewpassword" lay-verify="renewpassword"
					autocomplete="off" placeholder="确认密码" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-small" lay-submit="" id="update">修改</button>
				<button type="reset" class="layui-btn layui-btn-primary layui-btn-small">重置</button>
			</div>
		</div>
			</script>

	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script>
		layui.config({
			base : '../plugins/layui/modules/'
		});
		layui.use([ 'upload', 'layer', 'form' ], function() {
			var $ = layui.jquery,
				form = layui.form(),
				layer = layui.layer,
				//加载相册模块
				photo = layer.photos({
					photos : '#layer-photos-demo',
					shift : 5
				});
	
			//从cookie中获取用户名
			var username = readCookie("userName"),
				//上传的头像
				IMG = "",
				//时间属性，防止浏览器缓存
				timestamp = new Date().getTime(),
				//部门名称
				department,
				//部门列表
				cudepartment;
	
			//获取用户信息	
			$.ajax({
				url : '../getUserByName/' + username,
				type : "GET",
				async : false,
				success : function(info) {
					$('#name').val(username);
					IMG = info.img;
					if (info.department != null) {
						department = info.department.name;
					}
					$('#image').attr("src", "../" + IMG + '?' + timestamp);
				}
			});
	
			//加载department
			$.ajax({
				url : '../allDepartments',
				type : "GET",
				async : false,
				success : function(info) {
					cudepartment = info;
					for (var i in info) {
						name = info[i].name;
						if (department == name) {
							$('#department').append('<option value=' + name + ' selected="">' + name + '</option>');
						} else {
							$('#department').append('<option value=' + name + '>' + name + '</option>');
						}
						form.render();
					}
				}
			});
	
			//上传功能
			layui.upload({
				url : '../uploadImg',
				ext : 'jpg|png|gif',
				success : function(info) {
					IMG = info.message;
					$('#image').attr("src", "../" + IMG + '?' + timestamp);
				}
			});
	
			//修改按钮监听
			$('#query1').on('click', function() {
				var name = $('#name').val();
				var updateself = {
					"username" : username,
					"reusername" : name,
					"img" : IMG,
					"did" : 0
				};
				for (var i in cudepartment) {
					if (cudepartment[i].name.indexOf($('#department').val()) != -1) {
						updateself.did = cudepartment[i].id;
					}
				}
	
				//更新
				$.ajax({
					url : '../updateself',
					type : "POST",
					data : JSON.stringify(updateself),
					async : false,
					dataType : 'json',
					contentType : 'application/json;charset=utf-8',
					success : function(info) {
						if (info.length != 0) {
							delCookie("userName");
							document.cookie = "userName=" + name + ";path=/";
							layer.msg('修改成功！');
						} else {
							layer.msg('修改错误！');
						}
					}
				});
			});
	
			//监听修改密码按钮
			$('#pass').on('click', function() {
				layer.open({
					type : 1,
					title : '添加表单',
					content : $('#update-password').html(),
					btn : [ '关闭' ],
					area : [ '600px', '400px' ],
					maxmin : true,
					success : function(layero, index) {
						//给确认修改密码按钮设置监听
						layero.find('button#update').on('click', function() {
							var pwd = layero.find('input[name=password]').val();
							var npwd = layero.find('input[name=newpassword]').val();
							var rnpwd = layero.find('input[name=renewpassword]').val();
							if (npwd != rnpwd) {
								layer.msg('密码不一致！');
							}
							var json = {
								"username" : username,
								"password" : pwd,
								"code" : npwd
							};
							$.ajax({
								url : '../updatepwd',
								type : "POST",
								data : JSON.stringify(json),
								async : false,
								dataType : 'json',
								contentType : 'application/json;charset=utf-8',
								success : function(info) {
									if (info.message.indexOf("login success") != -1) {
										layer.msg('修改成功！');
										layero.find('input[name=password]').val('');
										layero.find('input[name=newpassword]').val('')
										layero.find('input[name=renewpassword]').val('')
									} else {
										layer.msg('密码错误！');
									}
								}
							});
						});
					},
					yes : function(index) {
						layer.close(index);
					},
					full : function(elem) {
						var win = window.top === window.self ? window : parent.window;
						$(win).on('resize', function() {
							var $this = $(this);
							elem.width($this.width()).height($this.height()).css({
								top : 0,
								left : 0
							});
							elem.children('div.layui-layer-content').height($this.height() - 95);
						});
					}
				});
			});
			//获取cookie
			function readCookie(name) {
				var cookieValue = "";
				var search = name + "=";
				if (document.cookie.length > 0) {
					offset = document.cookie.indexOf(search);
					if (offset != -1) {
						offset += search.length;
						end = document.cookie.indexOf(";", offset);
						if (end == -1)
							end = document.cookie.length;
						cookieValue = (document.cookie.substring(offset, end))
					}
				}
				return cookieValue;
			}
			//删除cookie
			function delCookie(name) {
				var exp = new Date();
				exp.setTime(exp.getTime() - 1);
				var cval = readCookie(name);
				if (cval != null)
					document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
			}
	
		});
	</script>

</body>
</html>
